<template>
  <div class="app-container">
    <el-row :gutter="2">
      <el-col :xs="24" :sm="12" :md="9" :lg="9" :xl="9">
        <el-row :gutter="5">
          <el-col :span="5">
            <company-product-series-cascade :dept-id="deptId" @change="productChange" />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="deviceName"
              clearable
              :placeholder="$t('device')+$t('name')"
              @change="searchNameChange"
            />
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="phoneNumber"
              clearable
              :placeholder="$t('cardNumber')"
              @change="phoneNumberChange"
            />
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="status"
              :placeholder="$t('status')"
              @change="statusChange"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button
              :icon="showMoreSearch?'el-icon-arrow-up':'el-icon-arrow-down'"
              type="primary"
              @click="showMoreSearch=!showMoreSearch"
            />
          </el-col>
        </el-row>
        <el-row v-show="showMoreSearch" :gutter="5" style="margin-top: 13px">
          <el-col :span="5">
            <el-select
              v-model="phoneStatus"
              :placeholder="$t('card')+$t('status')"
              @change="statusChange"
            >
              <el-option
                v-for="item in phoneStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="5">
            <province-city-cascade @change="provinceCityChange" />
          </el-col>
          <el-col :span="2">
            <el-button
              v-if="warnDesc"
              icon="el-icon-warning"
              type="primary"
              @click="unWarnDescDevices"
            />
            <el-button
              v-else
              icon="el-icon-warning-outline"
              plain
              @click="warnDescDevices"
            />
          </el-col>
        </el-row>
        <div class="uni-scroll" style="height: calc(100vh - 170px);margin-bottom: 5px;margin-top: 5px">
          <div
            v-for="(item,index) in deviceList"
            :key="index"
            @click="deviceClick(item,index)"
          >
            <device-item :device="item" :check="item.deviceCore==device.deviceCore" @refresh-list="pageGetDeviceByCompany()" />
          </div>
        </div>
        <div
          style="text-align: center;width: 100%;margin-top: 10px"
        >
          <el-pagination
            small
            background
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total,prev,pager,next,jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="15" :lg="15" :xl="15">
        <div class="uni-scroll" style="height: calc(100vh - 120px)">
          <sensor-camera-list :device="device" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  listDeviceStatus,
  listPhoneStatus
} from '@/util/common'
import {
  pageGetDeviceByCompany
} from '@/api/iot/iotDeviceApi'
import SensorCameraList from '@/components/SensorCameraList'
import DeviceItem from '@/components/DeviceItem'
import CompanyProductSeriesCascade from '@/components/CompanyProductSeriesCascade'
import ProvinceCityCascade from '@/components/ProvinceCityCascade'
import {
  getPageSize,
  getSearchDeviceName, getSearchDeviceStatus,
  setPageSize,
  setSearchDeviceName,
  setSearchDeviceStatus
} from '@/util/storage'
import {
  getDeptId,
  getCompanyId
} from '@/util/storage'
export default {
  name: 'ListModel',
  components: {
    SensorCameraList,
    DeviceItem,
    CompanyProductSeriesCascade,
    ProvinceCityCascade
  },
  data() {
    return {
      status: getSearchDeviceStatus(),
      phoneNumber: null,
      statusList: [],
      phoneStatusList: [],
      phoneStatus: null,
      deviceList: [],
      deviceCores: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      provinceId: null,
      cityId: null,
      productId: null,
      seriesId: null,
      device: {},
      deviceName: getSearchDeviceName(),
      dialogLocalVisible: false,
      userList: [],
      warnDesc: null,
      showMoreSearch: false,
      companyId: getCompanyId(),
      deptId: null
    }
  },
  created() {
    const param = this.$route.query
    const isDept = !!(param.isDept && param.isDept === '1')
    if (isDept) {
      this.deptId = parseInt(getDeptId())
    }
    this.statusList = listDeviceStatus(this)
    this.phoneStatusList = listPhoneStatus(this)
    this.pageGetDeviceByCompany()
  },
  methods: {
    deviceInfo(item) {
      this.$router.push({
        path: '/device/manage/' + item.deviceCore,
        query: { deviceCore: item.deviceCore, deviceName: item.deviceName }
      })
    },
    provinceCityChange(item) {
      this.provinceId = item.provinceId
      this.cityId = item.cityId
      this.currentPage = 1
      this.pageGetDeviceByCompany()
    },
    phoneNumberChange() {
      this.currentPage = 0
      this.pageGetDeviceByCompany()
    },
    warnDescDevices() {
      this.warnDesc = true
      this.pageGetDeviceByCompany()
    },
    unWarnDescDevices() {
      this.warnDesc = null
      this.pageGetDeviceByCompany()
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.currentPage = 1
      this.pageGetDeviceByCompany()
    },
    searchNameChange() {
      this.currentPage = 0
      this.pageGetDeviceByCompany()
      setSearchDeviceName(this.deviceName)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceByCompany()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDeviceByCompany()
    },
    showToolClick(item) {
      this.device = item

      if (item.showTool) {
        item.showTool = false
      } else {
        item.showTool = true
      }

      for (let i = 0, j = this.deviceList.length; i < j; i++) {
        if (this.deviceList[i].deviceCore === item.deviceCore) {
          this.$set(this.deviceList, i, item)
        }
      }
    },
    deviceClick(item) {
      this.device = item
    },
    deviceSetting(item) {
      this.device = item
      this.showSetting = true
    },
    statusChange() {
      this.currentPage = 1
      this.pageGetDeviceByCompany()
      setSearchDeviceStatus(this.status)
    },
    pageGetDeviceByCompany() {
      const req = {
        seriesId: this.seriesId,
        productId: this.productId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        phoneNumber: this.phoneNumber,
        companyId: this.companyId,
        status: this.status,
        phoneStatus: this.phoneStatus,
        warnDesc: this.warnDesc,
        provinceId: this.provinceId,
        deviceName: this.deviceName,
        deptId: this.deptId,
        cityId: this.cityId
      }
      pageGetDeviceByCompany(req).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceList = data.data
          if (this.deviceList != null && this.deviceList.length > 0) {
            this.device = this.deviceList[0]
          }
        } else {
          this.deviceList = []
        }
        this.dialogAreaVisible = false
      })
    }
  }
}
</script>

